<template>
  <view class="work-container">
    <uni-section title="任务管理" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <uni-grid-item :index="0">
          <view class="grid-item-box">
            <uni-icons type="plusempty" size="30"></uni-icons>
            <text class="text">新增流程</text>
          </view>
        </uni-grid-item>
        <uni-grid-item v-if="myProcessPermission" :index="1">
          <view class="grid-item-box">
            <uni-icons type="paperplane-filled" size="30"></uni-icons>
            <text class="text">已发任务</text>
          </view>
        </uni-grid-item>
        <uni-grid-item v-if="todoPermission" :index="2">
          <view class="grid-item-box">
            <uni-icons type="list" size="30"></uni-icons>
            <text class="text">待办任务</text>
          </view>
        </uni-grid-item>
        <uni-grid-item v-if="finishedPermission" :index="3">
          <view class="grid-item-box">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">已办任务</text>
          </view>
        </uni-grid-item>
        <uni-grid-item v-if="allPermission" :index="4">
          <view class="grid-item-box">
            <uni-icons type="settings-filled" size="30"></uni-icons>
            <text class="text">全部任务</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>
  import { checkPermi } from "@/utils/permission";
  import { listMenu } from "@/api/system/menu";
  export default {
    data() {
      return {
        // 流程相关目录名称，默认是任务管理，如果替换请修改。
        taskMenuName: "任务管理",
        // 流程相关的菜单，前端页面保存路径前缀，默认是flowable/task。
        // 如果修改文件位置，请不要修改task文件夹里面的文件对应关系。
        taskMenuPathPrefix: "flowable/task",

        // 已发任务功能权限
        // 默认查找配置前端页面路径为taskMenuPathPrefix + "/myProcess/index"的菜单
        myProcessPermission: false,

        // 待办任务功能权限
        // 默认查找配置前端页面路径为taskMenuPathPrefix + "/todo/index"的菜单
        todoPermission: false,

        // 已办任务功能权限
        // 默认查找配置前端页面路径为taskMenuPathPrefix + "/finished/index"的菜单
        finishedPermission: false,

        // 全部任务功能权限
        // 默认查找配置前端页面路径为taskMenuPathPrefix + "/all/index"的菜单
        allPermission: false,

        allPermissionList: [],

      }
    },
    onLoad: function () {
      this.getTaskMenu();
    },
    methods: {

      // 检测当前用户是否拥有权限
      checkPermi,

      // 获取任务管理菜单信息
      getTaskMenu() {

        listMenu().then(response => {
          let data = response.data;
          let taskMenuId = undefined;
          // 根据父id保存菜单信息，方便以后使用
          let parentObj = {};
          let taskMenuName = this.taskMenuName;
          data.forEach(menu => {
            // 如果根据菜单名称，找到任务管理节点
            let menuName = menu.menuName;
            let menuType = menu.menuType;
            if (menuName == taskMenuName && menuType == "M") {
              taskMenuId = menu.menuId;
            }

            let currentParentId = menu.parentId;
            if (!Object.hasOwnProperty.call(parentObj, currentParentId)) {
              parentObj[currentParentId] = [];
            }
            parentObj[currentParentId].push(menu);

          });
          if (!taskMenuId) {
            this.$modal.msgError("没有找到名称为" + taskMenuName + "的菜单");
            return;
          }


          // 根据前端页面位置，查找菜单下的权限
          let taskMenuPathPrefix = this.taskMenuPathPrefix;
          let myProcessIndexPath = taskMenuPathPrefix + "/myProcess/index";
          let todoIndexPath = taskMenuPathPrefix + "/todo/index";
          let finishedIndexPath = taskMenuPathPrefix + "/finished/index";
          let allIndexPath = taskMenuPathPrefix + "/all/index";

          let taskMenuChildrenList = parentObj[taskMenuId];

          taskMenuChildrenList.forEach(taskMenu => {
            let currentIndexPath = taskMenu.component;
            switch (currentIndexPath) {
              case myProcessIndexPath:
                this.myProcessPermission = true;
                break;
              case todoIndexPath:
                this.todoPermission = true;
                break;
              case finishedIndexPath:
                this.finishedPermission = true;
                break;
              case allIndexPath:
                this.allPermission = true;
                break;
            }

          });
        })
      },
      changeGrid(e) {
        let index = e && e.detail && e.detail.index;
        switch (index) {
          case 0:
            this.$tab.navigateTo("/pages/flowable/create/index");
            break;

          case 1:
            this.$tab.navigateTo("/pages/flowable/myProcess/index");
            break;
          case 2:
            this.$tab.navigateTo("/pages/flowable/todo/index");
            break;
          case 3:
            this.$tab.navigateTo("/pages/flowable/finished/index");
            break;
          case 4:
            this.$tab.navigateTo("/pages/flowable/all/index");
            break;

          default:
            break;
        }
      }
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }
</style>